﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->
    <!-- BEGIN HEAD -->

    <head>
        <meta charset="utf-8" />
        <title>SuperMgr前端框架</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />
        <!--全局通用框架样式 begin-->
        <!-- 全局基本样式 -->
        <link href="../content/superui/min/css/superui.common.min.css" rel="stylesheet" />
        <!-- 全局主题样式 -->
        <link href="../content/superui/global/css/components.min.css" id="style_components" rel="stylesheet" />
        <link href="../content/superui/pages/layouts/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color"/>

        <link href="../content/plugins/dialog/dialog.css" rel="stylesheet" />
        <!--全局通用框架样式 end-->
    </head>

    <body>
        <div class="page-container">
            <div class="page-content">
                <h3 class="page-title"> layer弹出层
                    <small> 非常实用的弹出层组件</small>
                </h3>
                <!-- END PAGE TITLE-->
                <!-- END PAGE HEADER-->
                <div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN PORTLET-->
                        <div class="portlet light bordered">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-bubble font-green-sharp"></i>
                                    <span class="caption-subject font-green-sharp sbold">layer弹出层</span>
                                </div>
                                <div class="actions">
                                    <div class="btn-group">
                                        <a class="btn green-haze btn-outline btn-circle btn-sm" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> 动作
                                            <i class="fa fa-angle-down"></i>
                                        </a>
                                        <ul class="dropdown-menu pull-right">
                                            <li>
                                                <a href="javascript:;"> 动作 1</a>
                                            </li>
                                            <li class="divider"> </li>
                                            <li>
                                                <a href="javascript:;">动作 2</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;">动作 3</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;">动作 4</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-hover table-striped table-bordered">
                                    <tr>
                                        <td> 弹出iframe </td>
                                        <td>
                                            <a class="btn red btn-outline sbold" onclick="modalOpen()"> 弹出iframe </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>确认框 </td>
                                        <td>
                                            <a class="btn green btn-outline sbold" onclick="modalConfirm()"> 确认框 </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> alert消息框 </td>
                                        <td>
                                            <a class="btn purple btn-outline sbold" onclick="modalAlert(1)"> success </a>
                                            <a class="btn purple btn-outline sbold" onclick="modalAlert(2)"> error </a>
                                            <a class="btn purple btn-outline sbold" onclick="modalAlert(3)"> warning </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>消息提示框 </td>
                                        <td>
                                            <a class="btn purple btn-outline sbold" onclick="modalMsg()"> 消息提示 </a>
                                        </td>
                                    </tr>
                                   
                                </table>
                           
                             
                            
                            </div>
                        </div>
                        <!-- END PORTLET-->
                    </div>
                </div>
            </div>
            <!-- END CONTENT BODY -->
        </div>
        <!--[if lt IE 9]>
    <script src="../content/superui/base/base-core/excanvas.min.js"></script>
    <script src="../content/superui/base/base-core/respond.min.js"></script>
    <![endif]-->
        <!-- 全局公共类库Begin -->
    <script src="../content/superui/min/js/superui.common.min.js"></script>

        <script src="../content/plugins/dialog/dialog.js"></script>
    </body>
<script>
   
        //新增
        function modalOpen() {
            $.fn.modalOpen({
                id: "Form",
                title: '打开页面',
                url: 'ui_extended_modals.html',
                width: "750px",
                height: "550px",
                callBack: function (iframeId) {
                    top.frames[iframeId].AcceptClick();
                }
            });
        };
    function modalConfirm() {
        $.fn.modalConfirm("确认要提交么？", function(status) {
            alert("您选择的是" + status);
        });
    }
    function modalAlert(type) {
        switch(type) {
            case 1:
                $.fn.modalAlert("提交成功", "success");
                return;
            case 2:
                $.fn.modalAlert("错误", "error");
                return;
            case 3:
                $.fn.modalAlert("警告", "warning");
                return;
        }
       
    }
    function modalMsg() {
        $.fn.modalMsg("消息框", "success");
    }
   
    $.fn.modalOpen = function (options) {
        var defaults = {
            id: null,
            title: '系统窗口',
            width: "100px",
            height: "100px",
            url: '',
            shade: 0.3,
            btn: ['确认', '关闭'],
            btnclass: ['btn btn-primary', 'btn btn-danger'],
            callBack: null
        };
        var options = $.extend(defaults, options);
        var _width = top.$(window).width() > parseInt(options.width.replace('px', '')) ? options.width : top.$(window).width() + 'px';
        var _height = top.$(window).height() > parseInt(options.height.replace('px', '')) ? options.height : top.$(window).height() + 'px';
        layer.open({
            id: options.id,
            type: 2,
            shade: options.shade,
            title: options.title,
            fix: false,
            area: [_width, _height],
            content: options.url,
            btn: options.btn,
            btnclass: options.btnclass,
            yes: function () {
                options.callBack(options.id)
            }, cancel: function () {
                return true;
            }
        });
    }
    $.fn.modalConfirm = function (content, callBack) {
        layer.confirm(content, {
            icon: "fa-exclamation-circle",
            title: "系统提示",
            btn: ['确认', '取消'],
            btnclass: ['btn btn-primary', 'btn btn-danger'],
        }, function () {
            callBack(true);
        }, function () {
            callBack(false)
        });
    }

    $.fn.modalAlert = function (content, type) {
        var icon = "";
        if (type == 'success') {
            icon = "fa-check-circle";
        }
        if (type == 'error') {
            icon = "fa-times-circle";
        }
        if (type == 'warning') {
            icon = "fa-exclamation-circle";
        }
        layer.alert(content, {
            icon: icon,
            title: "系统提示",
            btn: ['确认'],
            btnclass: ['btn btn-primary'],
        });
    }
    $.fn.modalMsg = function (content, type) {
        if (type != undefined) {
            var icon = "";
            if (type == 'success') {
                icon = "fa-check-circle";
            }
            if (type == 'error') {
                icon = "fa-times-circle";
            }
            if (type == 'warning') {
                icon = "fa-exclamation-circle";
            }
            layer.msg(content, { icon: icon, time: 4000, shift: 5 });
            $(".layui-layer-msg").find('i.' + icon).parents('.layui-layer-msg').addClass('layui-layer-msg-' + type);
        } else {
            layer.msg(content);
        }
    }
    $.fn.modalClose = function () {
        var index = layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        var $IsdialogClose = top.$("#layui-layer" + index).find('.layui-layer-btn').find("#IsdialogClose");
        var IsClose = $IsdialogClose.is(":checked");
        if ($IsdialogClose.length == 0) {
            IsClose = true;
        }
        if (IsClose) {
            layer.close(index);
        } else {
            location.reload();
        }
    }
   

    
</script>
</html>